<template>
  <div>
    <el-tabs v-model="activeName" type="card">
      <el-tab-pane label="非正式用户" name="first">
        <el-table :data="list" border style="width: 100%">
          <el-table-column type="index" width="50">
          </el-table-column>
          <el-table-column prop="loginName" label="用户名" width="120">
          </el-table-column>
          <el-table-column prop="gender" label="性别" width="60">
          </el-table-column>
          <el-table-column prop="age" label="年龄" width="60">
          </el-table-column>
          <el-table-column prop="phone" label="手机号">
          </el-table-column>
          <el-table-column prop="adress" label="地址">
          </el-table-column>
          <el-table-column label="操作" width="200">
            <template slot-scope="scope">
              <el-button size="mini" type="success" @click="handlePase(scope.$index, scope.row)">通过</el-button>
              <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
      <el-tab-pane label="正式用户" name="second">
        <el-table :data="user" border style="width: 100%;margin-bottom:20px;">
          <el-table-column type="index" width="50">
          </el-table-column>
          <el-table-column prop="loginName" label="用户名" width="120">
          </el-table-column>
          <el-table-column prop="gender" label="性别" width="60">
          </el-table-column>
          <el-table-column prop="age" label="年龄" width="60">
          </el-table-column>
          <el-table-column prop="phone" label="手机号">
          </el-table-column>
          <el-table-column prop="adress" label="地址">
          </el-table-column>
          <el-table-column label="操作" width="200">
            <template slot-scope="scope">
              <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination background layout="prev, pager, next" :total="total" :page-size="pageSize" @current-change="changePage">
        </el-pagination>
      </el-tab-pane>
    </el-tabs>
  </div>

</template>

<script>
import { createNamespacedHelpers } from "vuex";
const { mapState, mapActions, mapMutations } = createNamespacedHelpers("user");
export default {
  name: "User",
  mounted() {
    this.getList();
    this.getUser();
  },
  data() {
    return {
      activeName: "first"
    };
  },
  computed: {
    ...mapState(["list", "user",'total','pageSize'])
  },
  methods: {
    handlePase(index, user) {
      user.status = 1;
      this.pase(user);
    },
    handleDelete(index, user) {
      this.del(user.id);
    },
    ...mapMutations([]),
    ...mapActions(["getList", 'changePage',"getUser", "pase", "del"])
  }
};
</script>

<style>
</style>
